<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="上传" prop="field101" required>
        <el-upload
          ref="field101"
          :headers="headers"
          :file-list="field101fileList"
          :action="field101Action"
          :before-upload="field101BeforeUpload">
          <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
        </el-upload>


        <el-upload :action="actionUrl">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>


      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        actionUrl: 'http://127.0.0.1:8080/upload',
        formData: {
          field101: null,
        },
        rules: {},
        //设置文件上传请求头
        // 设置上传的请求头部
        headers: {
          Authorization: getToken()
        },
        //设置文件上传地址
        field101Action: process.env.VUE_APP_BASE_API + "/upload",
        field101fileList: [],
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      submitForm() {

        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
      field101BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
    }
  }

</script>
<style>
  .el-upload__tip {
    line-height: 1.2;
  }

</style>
